<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        width: 300px;
        height: 300px;
        margin: 100px auto;
        background-color: slateblue;
        /* 盒子阴影 */
        /* 可以有多个参数,最少两个,为水平偏移量和垂直偏移量 */
        box-shadow: 10px 5px;
        /* 含义:水平偏移量为10px,垂直偏移量为10px,阴影颜色为蓝色的颜色 */
        /* box-shadow: 10px 10px blue; */
        /* 含有三个参数,第一个参数为水平偏移量,第二个参数为垂直偏移量,第三个参数模糊程度 */
        /* box-shadow: 10px 10px 20px; */
        /* 含义:水平偏移量为10px,垂直偏移量为10px,模糊程度为20px,阴影颜色红色的颜色, */
        /* box-shadow: 10px 10px 20px red; */
        /* 含义:水平偏移量为10px,垂直偏移量为10px,模糊程度为20px,阴影的范围为30px,阴影颜色红色的颜色, */
        /* box-shadow: 10px 10px 20px 30px red; */
        /* 含义:水平偏移量为10px,垂直偏移量为10px,模糊程度为20px,阴影的范围为30px,阴影颜色红色的颜色,内阴影 */
        box-shadow: 0px 0px 50px 10px rebeccapurple inset;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
  </body>
</html>
